<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<title></title>
</head>
<style>
 body {display: flex;justify-content: center;align-items: center; height: 100vh; overflow: hidden;background-color: #000;} 
.laptop{transform:scale(0.8);}.screen{border-radius:20px;box-shadow:inset 0002px#c8cacb,inset 00010px#000;height:318px;width:518px;margin:0 auto;padding:9px9px23px9px;position:relative;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(15deg,#3f51b1 0%,#5a55ae 13%,#7b5fac 25%,#8f6aae 38%,#a86aa4 50%,#cc6b8e 62%,#f18271 75%,#f3a469 87%,#f7c978 100%);transform-style:preserve-3d;transform:perspective(1900px) rotateX(-88.5deg);transform-origin:50%100%;animation:open 4s infinite alternate;}@keyframes open{0%{transform:perspective(1900px) rotateX(-88.5deg);}100%{transform:perspective(1000px) rotateX(0deg);}}.screen::before{content:"";width:518px;height:12px;position:absolute;background:linear-gradient(#979899,transparent);top:-3px;transform:rotateX(90deg);border-radius:5px5px;}.text{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;color:#fff;letter-spacing:1px;text-shadow:005px#fff;}.header{width:100px;height:12px;position:absolute;background-color:#000;top:10px;left:50%;transform:translate(-50%,-0%);border-radius:006px6px;}.screen::after{background:linear-gradient(to bottom,#272727,#0d0d0d);border-radius:0020px20px;bottom:2px;content:"";height:24px;left:2px;position:absolute;width:530px;}.keyboard{background:radial-gradient(circle at center,#e2e3e4 85%,#a9abac 100%);border:solid #a0a3a7;border-radius:2px2px12px12px;border-width:1px2px02px;box-shadow:inset 0 -2px8px0#6c7074;height:12px;margin-top:-10px;position:relative;width:620px;z-index:9;}.keyboard::after{background:#e2e3e4;border-radius:0010px10px;box-shadow:inset 004px2px#babdbf;content:"";height:10px;left:50%;margin-left:-60px;position:absolute;top:0;width:120px;}.keyboard::before{background:00;border-radius:003px3px;bottom:-2px;box-shadow:-270px0#272727,250px0#272727;content:"";height:2px;left:50%;margin-left:-10px;position:absolute;width:40px;}
 </style>
<body>
<div class="laptop">
   <div class="screen"><div class="header"></div><div class="text">Hello 老表</div></div>
   <div class="keyboard"></div>
</div>
</body>
<script></script>
</html>